import { Image, Text, View } from "@tarojs/components";
import { GStyleSheet, DynamicColors } from "@/utils/DarkMode";
import menuIcon from "@/assets/images/device_control_icon_setting.png";

const dstyle = GStyleSheet.create({
  container: {
    width: '100%',
  },
  title: {
    flex: 1,
    color: DynamicColors.titleTextColor
  },
  icon: {
    width: "30rpx",
    height: "30rpx",
    marginLeft: 10,
  },

});

interface IProps {
  title: string;
  onClick?: () => void;
  icon?: string;
  textColor?: string
}

const DeviceNameView = ({ title, onClick, icon, textColor }: IProps) => {

  const styles = dstyle.useDynamicStyle();

  return (
    <View style={{ ...styles.container }} className='centerFlex' onClick={onClick}>
      <Text style={{...styles.title, color: textColor}} className='ellipsisText'>{title}</Text>
      {onClick && <Image style={styles.icon} src={icon || menuIcon} />}
    </View>
  );
};

export default DeviceNameView;
